<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>


<title>加盟店 - 人员档案</title>

<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jquery-ui/jquery-ui.css"/>
<link rel="stylesheet"
      href="${contextPath}/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jqgrid/ui.jqgrid.css"/>
<link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet" />
<jsp:include page="../../head.jsp"/>
<style type="text/css">
    .customBtn {
        line-height: 20px;
        margin-bottom: 3px;
    }

    .btnLine {
        margin-left: 1px;
        margin-top: 8px;
        margin-bottom: 2px;
    }

    @-webkit-keyframes bouncedelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0.0)
        }
        40% {
            -webkit-transform: scale(1.0)
        }
    }

    @keyframes bouncedelay {
        0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        }
        40% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }

    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

    .ui-jqgrid-sortable {
        text-align: center;
    }
</style>

<div class="row" id="app">
    <div class="row btnLine">
        <div class="button-len col-sm-12">
            <%--<shiro:hasPermission name="KT-USER:ADD">--%>
                <button class="btn btn-white btn-sm btn-purple customBtn" id="addCargo">
                    <i class="ace-icon fa fa-plus-circle purple"></i> 新增
                </button>
            <%--</shiro:hasPermission>--%>

            <%--<shiro:hasPermission name="KT-USER:EDIT">--%>
                <button class="btn btn-white btn-info btn-sm customBtn" id="deleteParam">
                    <i class="ace-icon fa fa-pencil blue"></i> 删除
                </button>
            <%--</shiro:hasPermission>--%>
              <%--<shiro:hasPermission name="KT-USER:INITPASSWORD">--%>
                <button class="btn btn-white btn-info btn-sm customBtn" id="editUser">
                    <i class="glyphicon glyphicon-ok"></i> 修改
                </button>
            <%--</shiro:hasPermission>--%>

            <label style="">参数类型</label>
            <select class="input-sm" id="paramType">
                <option :value="obj.code" v-for="(obj, index) in arrayShop">{{ obj.text }}</option>
            </select>
            <button class="btn btn-sm btn-white btn-info search-len customBtn"
                    onclick="searchParamType()">
                <i class="ace-icon fa fa-search orange"></i>搜索
            </button>
        </div>
    </div>

    <div class="col-xs-12">

        <table id="grid-table"></table>

        <div id="grid-pager"></div>

    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="">
            <div class="modal-content">
                <div class="modal-header" style="font-size: 20px; margin-bottom: -15px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                    	  新增参数
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="button-len col-sm-12" style="margin-top: 5px; margin-bottom: 5px;">
                        <label for="" style="margin-left: 0px;">参数编码</label>   
                        <input class="input-sm" type="text" id="paramNo" style="margin-left: 2px;"
                               placeholder="参数编码"> 
                        <input class="input-sm" type="text" id="dictId" style="margin-left: 2px; display: none">
                    </div>
                    <div class="button-len col-sm-12" style="margin-top: 5px; margin-bottom: 5px;">
                        <label for="" style="margin-left: 0px;">参数名称</label>
                        <input class="input-sm" type="text" id="paramName"  style="margin-left: 2px;"
                               placeholder="参数名称">
                    </div>
					<div class="button-len col-sm-12" style="margin-top: 5px; margin-bottom: 5px;">
                        <label for="" style="margin-left: 15px;">参数值</label>
                        <input class="input-sm" type="text" id="paramValue"  style="margin-left: 2px;"
                               placeholder="参数值">
                    </div>
                    <div class="button-len col-sm-12" style="margin-top: 5px; margin-bottom: 5px;">
                        <label for="" style="margin-left: 2px;">参数类型</label>
                        <select class="input-sm" id="selectParamType">
                           <option :value="obj.code" v-for="(obj, index) in arrayShop">{{ obj.text }}</option>
                        </select>
                    </div>
                    <!-- 内容数据结束 -->
                    <div style="text-align: right;">
                        <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" id="submitUser">提交</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>





<input class="input-sm" type="text" id="userId" style="margin-left: 2px; display: none"
       placeholder="userId">
<!-- page specific plugin scripts -->

<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script src="${contextPath}/static/statistics/js/vue.js"></script>
<!-- 公用 -->
<script type="text/javascript">
    var grid_selector = "#grid-table";
    var pager_selector = "#grid-pager";

    var laypage = layui.laypage,
        layer = layui.layer
    laydate = layui.laydate;

    var queryModel = {
        //分页参数
        page: '1',
        rows: '10'
    }
</script>
<!-- Vue实现类 -->
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            arrayShop: [],
        },
        methods: {

        }
    })
    
    var getShop = function () {
        var filters = {
                "rules": [
                    {
                        "field": "state",
                        "data": '1'
                    }, 
                    {
                        "field": "paramType",
                        "data": ''
                    }
                ]
            };
        queryModel.filters = JSON.stringify(filters);
        $.ajax({
        	url: "${contextPath}/KtParamType/getParamType",
            type: 'post',
            data: queryModel,
            success: function (data) {
                app.arrayShop = data.recordList;
            },
            error: function (error){
            	get();
                layer.msg("获取出错："+data.message)
            }
        })
    }
    getShop();
</script>
<!--业务 -->
<script type="text/javascript">
    $("#submitUser").click(function () {    
        queryModel.paramNo = $("#paramNo").val();
        queryModel.paramName = $("#paramName").val();
        queryModel.paramValue = $("#paramValue").val();
        queryModel.paramType = $("#selectParamType").val();
        queryModel.dictId = $("#dictId").val();
        console.log("参数类型值==",queryModel);
        layer.load(1)
        $.ajax({
            url: '${contextPath}/KtParamType/saveParamType',
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false){
                    layer.msg("获取出错："+data.message)
                    return
                }
                layer.msg("提示：操作成功");
                $('#myModal').modal('hide')
                $('#selectParamType').attr("disabled",false); 
                $("#paramNo").val('');
                $("#paramName").val('');
                $("#paramValue").val('');
                $("#dictId").val(''); 
                reload();
            },
            error: function (error){
                layer.closeAll('loading')
                layer.msg("获取出错："+data.message)
            }
        })
    });

    //删除参数类型
    var deleteParam = function (rowData) {
    	console.log("rowData==",rowData.dictId);
    	layer.confirm('将会把这条参数类型数据删除', {
            btn: ['确定', '取消']
        }, function () {
            queryModel.id = rowData.dictId;
            layer.load(1);
            $.ajax({
            	url: "${contextPath}/KtParamType/deleteParamType",
                type: 'post',
                data: queryModel,
                dataType: 'json',
                success: function (data) {
                    layer.closeAll('loading');
                    if (data.success) {
                        layer.msg('删除成功', {icon: 1});
                    } else {
                        layer.msg(data.message);
                    }
                    reload();
                },
                error: function (error) {
                    layer.closeAll('loading');
                    $.jgrid.info_dialog("提示：", "服务器异常，稍后再试");
                }
            })
        }, function () {
        });
    }
    
    //更改参数类型
    var editUser = function (rowData) {
    	console.log(rowData);
      $("#paramNo").val(rowData.sortNo);
      $("#paramName").val(rowData.text);
      $("#paramValue").val(rowData.code);
      var selectParamType = document.getElementById('selectParamType');
      for(var i=0; i<selectParamType.options.length; i++){  
   	    if(selectParamType.options[i].innerHTML == rowData.text1){  
   	    	selectParamType.options[i].selected = true;  
   	        break;  
   	    }  
   	  } 
      $("#dictId").val(rowData.dictId);
   	  $('#selectParamType').attr("disabled",true); 
	  $('#myModal').modal('show');
  }
</script>

<script type="text/javascript" src="${contextPath}/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="${contextPath}/static/ace/components/jqGrid/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="${contextPath}/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="${contextPath}/static/layer/layer.js"></script>
<script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<!-- jqgrid 数据加载 -->
<script type="text/javascript">

    var filters = {
        "rules": [
            {
                "field": "state",
                "data": '1'
            },
            {
                "field": "paramType",
                "data": ''
            }
        ]
    };
    var grid_data = {'filters': JSON.stringify(filters)};
//    console.log(grid_data)

    var scripts = [null, "${contextPath}/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", "${contextPath}/static/ace/components/jqGrid/js/jquery.jqGrid.js", "${contextPath}/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js", "${contextPath}/static/layer/layer.js","${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js", "${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {

        jQuery(function ($) {
            var parent_column = $(grid_selector).closest('[class*="col-"]');
            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid('setGridWidth', parent_column.width());
            })

            //resize on sidebar collapse/expand
            $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function () {
                        $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                    }, 20);
                }
            })

            
            jQuery(grid_selector).jqGrid({
                //direction: "rtl",

                //subgrid options
                subGrid: false,
                url: "${contextPath}/KtParamType/getParamTypeList",
                postData: grid_data,
                datatype: "json",
                mtype: 'POST', 
                height: 300,
                colNames: ['DICT_ID','idxCode','参数编码', '参数名称', '类型', '参数值', '最后修改时间', '操作人'],
                colModel: [
					{name: 'dictId', index: 'dictId', editable: true, hidden:true},
					{name: 'idxCode', index: 'idxCode', editable: true, hidden:true},
                    {name: 'sortNo', index: 'sortNo', editable: true},
                    {
                        name: 'text',
                        index: 'text',
                        width: 90,
                        editable: true,
                        sortable: false,
                        editrules: {required: true}
                    },
                    {
                        name: 'text1',
                        index: 'text1',
                        width: 110,
                        editable: true,
                        sortable: false,
                    },
                    {name: 'code', index: 'code', width: 70, editable: false, sortable: false},
                    {
                        name: 'modifyTime',
                        index: 'modifyTime',
                        width: 90,
                        editable: true,
                        sortable: false,
                        edittype: 'select',
                        <%--editoptions: {dataUrl: '${contextPath}/sys/role/getRoleInfoToSelect'},--%>
                        editrules: {required: true},
                    },
                    {
                        name: 'modifyUser',
                        index: 'modifyUser',
                        width: 90,
                        editable: true,
                        sortable: false,
                        edittype: 'select',
                        editoptions: {value: " :不选择;毕节:毕节;六盘水:六盘水;安顺:安顺;贵安:贵安;贵阳:贵阳;遵义:遵义;铜仁:铜仁;黔东南:黔东南"}
                    },
                ],
                //sortname: "gmtModifiedStr",
                sortorder: "desc",
                viewrecords: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: pager_selector,
                altRows: true,
                //toppager: true,

                multiselect: false,
                //multikey: "ctrlKey",
                multiboxonly: true,

                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },

//                jsonReader: {
//                    root:"dataList", page:"currPage", total:"totalpages",          //   很重要 定义了 后台分页参数的名字。
//                    records:"totalCount", repeatitems:false, id : "id"
//                },

                editurl: "${contextPath}/ktCommon/saveUser",//nothing is saved
                caption: "参数类型",
                jsonReader: {
                    root: "recordList",
                    page: "currentPage",
                    total: "pageCount",
                    records: "recordCount"
                }

            });
            $(window).triggerHandler('resize.jqGrid');

            $("#deleteParam").click(function () {
                var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
                if (!id) {
                    layer.msg("提示：请选择一条信息");
                    return;
                }
                var rowData = $(grid_selector).jqGrid("getRowData", id);
                deleteParam(rowData);
            });

            $("#addCargo").click(function () {
            	$("#paramNo").val('');
                $("#paramName").val('');
                $("#paramValue").val('');
                $("#dictId").val(''); 
                $('#selectParamType').attr("disabled",false); 
                $('#myModal').modal('show');
				
            })

            $("#editUser").click(function () {
            	var btId = this.id;
                var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
                if (!id) {
                    layer.msg("提示：请选择一条信息");
                    return;
                }
                var rowData = $(grid_selector).jqGrid("getRowData", id);
                editUser(rowData);
            });


            //navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                { 	//navbar options
                    edit: false,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: false,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: false,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: false,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: false,
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form
                    //closeAfterEdit: true,
                    //width: 700,
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //new record form
                    //width: 700,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                            .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        if (form.data('styled')) return false;

                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);

                        form.data('styled', true);
                    },
                    onClick: function (e) {
                        //alert(1);
                    }
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        style_search_form(form);
                    },
                    afterRedraw: function () {
                        style_search_filters($(this));
                    }
                    ,
                    multipleSearch: true,
                    /**
                     multipleGroup:true,
                     showQuery: true
                     */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
            )


            function style_edit_form(form) {
                //update buttons classes
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').hide();
                buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
            }

            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
            }

            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }

            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
            }

            function beforeDeleteCallback(e) {
                var form = $(e[0]);
                if (form.data('styled')) return false;

                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);
                form.data('styled', true);
            }

            function beforeEditCallback(e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }
            function styleCheckbox(table) {
                /**
                 $(table).find('input:checkbox').addClass('ace')
                 .wrap('<label />')
                 .after('<span class="lbl align-top" />')


                 $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                 .find('input.cbox[type=checkbox]').addClass('ace')
                 .wrap('<label />').after('<span class="lbl align-top" />');
                 */
            }
            function updateActionIcons(table) {

            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                var replacement =
                    {
                        'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                        'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                        'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                        'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
                    };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                    if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({container: 'body'});
                $(table).find('.ui-pg-div').tooltip({container: 'body'});
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

            $(document).one('ajaxloadstart.page', function (e) {
                $.jgrid.gridDestroy(grid_selector);
                $('.ui-jqdialog').remove();
            });
        });
    });
</script>
<!-- 搜索 -->
<script type="text/javascript">
    /**
     * 搜索店铺
     */
    function searchParamType() {
        var paramType = $("#paramType").val();
        var filters = {
            "rules": [{
                "field": "paramType",
                "data": paramType
            }]
        };
        jQuery("#grid-table").jqGrid('setGridParam', {
            postData: {
                "filters": JSON.stringify(filters)
            }
        }).trigger("reloadGrid");
    }


    var reload = function () {
//        $(grid_selector).jqGrid('clearGridData');  //清空表格
        $(grid_selector).jqGrid('setGridParam',{
            //url:"${contextPath}/ktCommon/getUserListByPage",
            datatype:'json',
//                    postData:param,
            page:1
        }).trigger("reloadGrid"); //重新载入
    }
</script>